<template>
  <!-- 工单表表单弹窗 -->
  <el-dialog
          v-model="visibleDialog"
          :title="props.title"
          width="70%"
          draggable
          @close="closeDialog"
  >
    <el-form ref="formRef" :model="formData" :rules="rules" label-width="160">
      <el-row>
      <el-col :span="12">
      <el-form-item label="计划数量" prop="planQuantity">
      <el-input v-if="!props.isReadonly" v-model="formData.planQuantity" placeholder="请输入计划数量" clearable />
  
      <span v-else>{{formData.planQuantity}}</span>
        </el-form-item>
      </el-col>
      <el-col :span="12">
      <el-form-item label="合格数量" prop="validQuantity">
      <el-input v-if="!props.isReadonly" v-model="formData.validQuantity" placeholder="请输入合格数量" clearable />
  
      <span v-else>{{formData.validQuantity}}</span>
        </el-form-item>
      </el-col>
      <el-col :span="12">
      <el-form-item label="物料编号" prop="materialCode">
      <el-input v-if="!props.isReadonly" v-model="formData.materialCode" placeholder="请输入物料编号" clearable />
  
      <span v-else>{{formData.materialCode}}</span>
        </el-form-item>
      </el-col>
      <el-col :span="12">
      <el-form-item label="物料名称" prop="materialName">
      <el-input v-if="!props.isReadonly" v-model="formData.materialName" placeholder="请输入物料名称" clearable />
  
      <span v-else>{{formData.materialName}}</span>
        </el-form-item>
      </el-col>
      <el-col :span="12">
      <el-form-item label="状态" prop="formStatus">
    <el-select style="width: 100%;" v-if="!props.isReadonly" v-model="formData.formStatus" placeholder="请选择状态" clearable>
    <el-option
            v-for="item in dictionaryStore.filterDictList('WorkingFormStatus')"
            :key="item.value"
            :label="item.label"
            :value="item.value"
    />
  </el-select>
  
      <span v-else>{{ dictionaryStore.filterDictName('WorkingFormStatus', formData.formStatus)}}</span>
        </el-form-item>
      </el-col>
      <el-col :span="12">
      <el-form-item label="计划编号" prop="processingOrderNumber">
      <el-input v-if="!props.isReadonly" v-model="formData.processingOrderNumber" placeholder="请输入计划编号" clearable />
  
      <span v-else>{{formData.processingOrderNumber}}</span>
        </el-form-item>
      </el-col>
      <el-col :span="12">
      <el-form-item label="计划班次id" prop="shiftId">
      <el-input v-if="!props.isReadonly" v-model="formData.shiftId" placeholder="请输入计划班次id" clearable />
  
      <span v-else>{{formData.shiftId}}</span>
        </el-form-item>
      </el-col>
      </el-row>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button v-if="!props.isReadonly" type="primary" :loading="loading" @click="handleSubmit">确 定</el-button>
        <el-button @click="closeDialog">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
  import request from "@/utils/request";
  import { useDictStoreHook } from "@/store/modules/dictionary"; // 引入
  const dictionaryStore = useDictStoreHook();

  defineOptions({
    name: "MESMESPLANWORKINGFORMADDORUPDATE",
    inheritAttrs: false,
  });

  const emit = defineEmits(["reset-table", "change-visible"]);

  const props = defineProps({
    visible: {
      type: Boolean,
      default: () => {
        return false;
      },
    },
    title: {
      type: String,
      default: () => {
        return "";
      },
    },
    data: {
      type: Object,
      default: () => {
        return {};
      },
    },
    isReadonly: {
      type: Boolean,
      default: () => {
        return false;
      },
    },
  });

  const visibleDialog = ref(false);
  watch(
      () => props.visible,
      (newVal: boolean) => {
        visibleDialog.value = newVal;
        setTimeout(() => {
          formRef.value.clearValidate();
        }, 50);
      }
  );

  const rules = reactive({
    planQuantity: [
                        { min: 1, max: 32, message: "长度在 1 到 32 个字符", trigger: "blur" }
                  ],
    validQuantity: [
                        { min: 1, max: 32, message: "长度在 1 到 32 个字符", trigger: "blur" }
                  ],
    materialCode: [
                        { min: 1, max: 32, message: "长度在 1 到 32 个字符", trigger: "blur" }
                  ],
    materialName: [
                        { min: 1, max: 50, message: "长度在 1 到 50 个字符", trigger: "blur" }
                  ],
    formStatus: [
                        ],
    processingOrderNumber: [
                        { min: 1, max: 50, message: "长度在 1 到 50 个字符", trigger: "blur" }
                  ],
    shiftId: [
                        { min: 1, max: 32, message: "长度在 1 到 32 个字符", trigger: "blur" }
                  ],
  });

  const formRef = ref(ElForm);

  let formData = reactive({
 id: "",  organizationId: "",  organizationCode: "",  plantId: "",  organizationName: "",  plantCode: "",  plantName: "",  monthPlanId: "",  processesId: "",  processesClassification: "",  sequence: "",  figureNumber: "",  planQuantity: "",  plannedBatch: "",  finishQuantity: "",  validQuantity: "",  invalidQuantity: "",  materialId: "",  materialCode: "",  materialName: "",  scrapQuantity: "",  quantityUnit: "",  isClosed: "",  isPause: "",  formStatus: "",  finishTime: "",  finishUser: "",  approveTime: "",  approveUser: "",  processingOrderNumber: "",  processingOrderType: "",  shiftSystemId: "",  shiftId: "",  groupsId: "",  planUserIds: "",  planUsers: "",  deviceId: "",  deviceName: "",  demandPeople: "",  planBeginTime: "",  planEndTime: "",  beginTime: "",  endTime: "",  routingAllocationId: "",  planDate: "",  planDateId: "",  stoveNum: "",  stoveStatus: "",  stoveCount: "",  workCenterId: "",  workCenterCode: "",  workCenterName: "",  version: "",  remarks: "",  createTime: "",  createdUserId: "",  createdUserName: "",  lastUpdateTime: "",  lastUpdatedUserId: "",  lastUpdatedUserName: "",  deleted: "",   });

  watch(
          () => props.data,
          (newVal: any) => {
            formData.id = ""
            if (newVal?.id) {
              const {  id,  organizationId,  organizationCode,  plantId,  organizationName,  plantCode,  plantName,  monthPlanId,  processesId,  processesClassification,  sequence,  figureNumber,  planQuantity,  plannedBatch,  finishQuantity,  validQuantity,  invalidQuantity,  materialId,  materialCode,  materialName,  scrapQuantity,  quantityUnit,  isClosed,  isPause,  formStatus,  finishTime,  finishUser,  approveTime,  approveUser,  processingOrderNumber,  processingOrderType,  shiftSystemId,  shiftId,  groupsId,  planUserIds,  planUsers,  deviceId,  deviceName,  demandPeople,  planBeginTime,  planEndTime,  beginTime,  endTime,  routingAllocationId,  planDate,  planDateId,  stoveNum,  stoveStatus,  stoveCount,  workCenterId,  workCenterCode,  workCenterName,  version,  remarks,  createTime,  createdUserId,  createdUserName,  lastUpdateTime,  lastUpdatedUserId,  lastUpdatedUserName,  deleted,  } = newVal;
              Object.assign(formData, {  id,  organizationId,  organizationCode,  plantId,  organizationName,  plantCode,  plantName,  monthPlanId,  processesId,  processesClassification,  sequence,  figureNumber,  planQuantity,  plannedBatch,  finishQuantity,  validQuantity,  invalidQuantity,  materialId,  materialCode,  materialName,  scrapQuantity,  quantityUnit,  isClosed,  isPause,  formStatus,  finishTime,  finishUser,  approveTime,  approveUser,  processingOrderNumber,  processingOrderType,  shiftSystemId,  shiftId,  groupsId,  planUserIds,  planUsers,  deviceId,  deviceName,  demandPeople,  planBeginTime,  planEndTime,  beginTime,  endTime,  routingAllocationId,  planDate,  planDateId,  stoveNum,  stoveStatus,  stoveCount,  workCenterId,  workCenterCode,  workCenterName,  version,  remarks,  createTime,  createdUserId,  createdUserName,  lastUpdateTime,  lastUpdatedUserId,  lastUpdatedUserName,  deleted,  });
            }
          }
  );

  /** 关闭表单弹窗 */
  function closeDialog() {
    visibleDialog.value = false;
    emit("change-visible", false);
    resetForm();
  }

  /** 重置表单 */
  function resetForm() {
    formRef.value.resetFields();
    formRef.value.clearValidate();
    formData.id = ""
    formData.organizationId = ""
    formData.organizationCode = ""
    formData.plantId = ""
    formData.organizationName = ""
    formData.plantCode = ""
    formData.plantName = ""
    formData.monthPlanId = ""
    formData.processesId = ""
    formData.processesClassification = ""
    formData.sequence = ""
    formData.figureNumber = ""
    formData.planQuantity = ""
    formData.plannedBatch = ""
    formData.finishQuantity = ""
    formData.validQuantity = ""
    formData.invalidQuantity = ""
    formData.materialId = ""
    formData.materialCode = ""
    formData.materialName = ""
    formData.scrapQuantity = ""
    formData.quantityUnit = ""
    formData.isClosed = ""
    formData.isPause = ""
    formData.formStatus = ""
    formData.finishTime = ""
    formData.finishUser = ""
    formData.approveTime = ""
    formData.approveUser = ""
    formData.processingOrderNumber = ""
    formData.processingOrderType = ""
    formData.shiftSystemId = ""
    formData.shiftId = ""
    formData.groupsId = ""
    formData.planUserIds = ""
    formData.planUsers = ""
    formData.deviceId = ""
    formData.deviceName = ""
    formData.demandPeople = ""
    formData.planBeginTime = ""
    formData.planEndTime = ""
    formData.beginTime = ""
    formData.endTime = ""
    formData.routingAllocationId = ""
    formData.planDate = ""
    formData.planDateId = ""
    formData.stoveNum = ""
    formData.stoveStatus = ""
    formData.stoveCount = ""
    formData.workCenterId = ""
    formData.workCenterCode = ""
    formData.workCenterName = ""
    formData.version = ""
    formData.remarks = ""
    formData.createTime = ""
    formData.createdUserId = ""
    formData.createdUserName = ""
    formData.lastUpdateTime = ""
    formData.lastUpdatedUserId = ""
    formData.lastUpdatedUserName = ""
    formData.deleted = ""
  }

  const loading = ref(false);

  /** 工单表保存提交 */
  function handleSubmit() {
    formRef.value.validate(async (valid: any) => {
      if (valid) {
        loading.value = true;
        const text = formData.id ? "编辑" : "新增";
        await request({
          url: "/mes/mesplanworkingform/save",
          method: "post",
          data: formData,
        }).finally(() => {
          loading.value = false;
        });
        ElMessage.success( text +`成功`);
        closeDialog();
        emit("reset-table", formData.id);
      }
    });
  }


  // 组件销毁时调用
  onBeforeUnmount(() => {
    visibleDialog.value = false;
    emit("change-visible", false);
  });


</script>
